<template>
    <div>
        <!-- 面包屑导航 -->
        <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>电影管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/home/movie-list' }">电影列表</el-breadcrumb-item>
            <el-breadcrumb-item>修改电影</el-breadcrumb-item>
        </el-breadcrumb> -->

        <!-- 分割线 -->
        <!-- <el-divider content-position="center"></el-divider> -->

        <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm"
            style="width: 500px;">

            <el-form-item label="封面图片" prop="cover">
                <el-upload class="avatar-uploader" action="http://localhost:9000/upload" :show-file-list="false"
                    :on-success="uploadSuccess">
                    <img v-if="form.cover" :src="form.cover" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="电影类别" prop="categoryId">
                <el-radio-group v-model="form.category_id">
                    <el-radio :label="1">热映</el-radio>
                    <el-radio :label="2">待映</el-radio>
                    <el-radio :label="3">经典</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="电影名称" prop="title">
                <el-input v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="电影类型" prop="type">
                <el-select v-model="form.type" multiple placeholder="请选择">
                    <el-option v-for="item in movieTypes" :label="item.typename" :value="item.typename" :key="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="电影主演" prop="starActor">
                <template>
                    <el-select v-model="form.star_actor" multiple filterable remote reserve-keyword placeholder="请输入关键词"
                        :remote-method="queryActors" :loading="loading">
                        <el-option v-for="item in actors" :key="item.id" :label="item.actor_name"
                            :value="item.actor_name">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>

            <el-form-item label="上映时间" required>
                <el-date-picker type="date" placeholder="选择日期" v-model="form.showingon" value-format="yyyy-MM-dd"
                    format="yyyy 年 MM 月 dd 日">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="电影评分" prop="score">
                <el-input v-model="form.score"></el-input>
            </el-form-item>
            <el-form-item label="电影时长" prop="duration">
                <el-input v-model="form.duration"></el-input>
            </el-form-item>
            <el-form-item label="电影简介" prop="description">
                <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 10 }" v-model="form.description"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('form')">修改</el-button>
                <el-button @click="$router.go(-1)">返回</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                id: null,
                category_id: 1,
                cover: '',
                title: '',
                type: '',
                star_actor: '',
                showingon: '',
                score: '',
                duration: '',
                description: ''
            },
            rules: {
                cover: [
                    { required: true, message: '请选择一张图片', trigger: 'blur' }
                ],
                title: [
                    { required: true, message: '请填写标题', trigger: 'blur' }
                ],
                type: [
                    { required: true, message: '请选择类型', trigger: 'blur' }
                ],
                star_actor: [
                    { required: true, message: '请选择演员', trigger: 'blur' }
                ],
                showingon: [
                    { required: true, message: '请选择上映时间', trigger: 'blur' }
                ],
                score: [
                    { required: true, message: '请输入评分', trigger: 'blur' }
                ],
                duration: [
                    { required: true, message: '请输入时长', trigger: 'blur' }
                ],
                description: [
                    { required: true, message: '请输入简介', trigger: 'blur' }
                ]
            },

            movieTypes: [], //电影类型
            // 远程搜索相关
            actors: [],  //演员列表[{id,actor_name,actor_avatar}]
            loading: false,
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.form.type = this.form.type.join('/')
                    this.form.star_actor = this.form.star_actor.join('/')
                    this.form.id = this.$route.params.id;
                    this.$http.movieApi.updateMovie(this.form).then(res => {
                        if (res.data.code == 200) {
                            this.resetForm('form')
                            this.$message({
                                message: '修改电影成功',
                                type: 'success'
                            })
                        }
                    }).catch(err => {
                        console.log(err);
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // 文件上传成功的回调
        uploadSuccess(res, file) {
            this.form.cover = res.data;
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        queryActors(query) {
            if (query !== '') {
                this.loading = true;
                this.$http.actorApi.queryByNameLike({ name: query }).then(res => {
                    this.loading = false;
                    // console.log(res);
                    this.actors = res.data.data
                })
            } else {
                this.options = [];
            }
        }
    },
    mounted() {
        this.$http.movieApi.queryMovieTypes().then(res => {
            // console.log(res);
            this.movieTypes = res.data.data;
        })
        let id = this.$route.params.id;
        this.$http.movieApi.queryMovieById({ id }).then(res => {
            // console.log(res);
            this.form = res.data.data;
            this.form.star_actor = this.form.star_actor.split(/\s*[／\/]\s*/)
            this.form.type = this.form.type.split(/\s*[／\/]\s*/)
            // console.log(this.form);
        })
    },
}
</script>

<style lang="scss">
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}

.avatar {
    width: 100px;
    height: 100px;
    display: block;
}
</style>